<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>关键词数据导入 - [[${T(com.b2c.erp.DataConfigObject).getInstance().getSysName()}]]</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">

    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <style>
        .a-input {
            height: 36px;
            line-height: 36px;
            margin-bottom: 20px;
        }

        .a-input span {
            display: inline-block;
            width: 100px;
            padding-right: 15px;
            font-size: 14px;
            text-align: right;
            color: #323232;
        }

        .a-input input {
            border: 1px solid #dcdcdc;
            height: 22px;
            line-height: 22px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }
        .a-input form {
            border: 1px solid #dcdcdc;
            height: 22px;
            line-height: 22px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }

        .a-input select {
            border: 1px solid #dcdcdc;
            height: 36px;
            line-height: 36px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }

        .a-input select {
            width: 260px;
        }

        .textarea-box{
            display: flex;

            padding-right: 15px;
            font-size: 14px;
            text-align: right;
            color: #323232;
        }
        .textarea-box span{
            width: 100px;
            margin-right: 20px;
        }
        .textarea-box textarea{
            border:1px solid #ccc;
            border-radius: 8px;
            padding: 5px;
        }
        .content-title {
            font-weight: bold;
            padding: 20px 40px;
            font-size: 16px;
        }
        .bussiness-table{
            width: 95%;
            margin: 0 auto;
        }
        .bussiness-table input{
            border: none;
            min-width:300px ;
            height: 36px;
            padding: 0 15px;
        }
        .bussiness-total-box{
            margin-left: 40px;
            margin-top: 30px;
        }
        .total-number{
            color: red;
            font-weight: bold;
            font-size: 16px;
        }
        .order-save{
            margin: 30px 150px
        }

    </style>
    <div class="sp-wrapper">
        <div class="order-body">
            <div class="content-title">&nbsp;</div>
            <form action="/big_data/keyword_import" method="post"  enctype="multipart/form-data" class="layui-form" id="sp-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属类目：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="category" value="女装" title="女装" checked>
                        <input type="radio" name="category" value="食品零食" title="食品零食">
                        <input type="radio" name="category" value="男装" title="男装" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上级</label>
                    <div class="layui-input-inline">
                        <select name="parent1" id="parent1" lay-search="" lay-filter="parent1">
                            <option value="">一级</option>
                            <option th:each="item:${parentList}" th:value="${item.getId()}" th:text="${item.getKeyword()}" ></option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="parent2" id="parent2" lay-search="">

                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收录日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="include_date" id="include_date" lay-verify="required" readonly placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">excel文件</label>
                    <div class="layui-input-block">
                        <input type="file" name="excel" id="excel" placeholder="" class="layui-input" lay-verify=”required”/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                    <h1 style="color: red" th:text="${msg}"></h1>
                    <button type="button" id="save" class="layui-btn order-save">导入</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="clear"></div>

    </div>

    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript" src="/address/Address.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#excel_upload_btn").click(function () {
                var excel = $("#excel").val();
                if (excel == '') {
                    alert("请选择文件");
                    return false;
                } else if (excel.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
                    alert("只能上传Excel文件");
                } else if (excel.lastIndexOf(".xlsx") < 0) {
                    alert("只能上传Excel文件");
                } else {
                    var url = "/zbj/excel_sample_import_ajax";
                    // var formData = new FormData($('#execl_form')[0]);

                    var formData = new FormData();
                    formData.append("excel", document.getElementById("excel").files[0]);
                    $(this).hide();
                    $("#excel_upload_btn_").show();
                    $.ajax({
                        url: url,
                        type: "post",
                        data: formData,
                        success: function (result) {
                            $("#excel_upload_btn_").hide();
                            $("#excel_upload_btn").show();
                            console.log(result);
                            if (result.code == 0) {
                                $("#sp-data").html("");

                                for(var i=0;i<result.data.length;i++){
                                    var d = result.data[i];
                                    var ht = '<tr><td><input type="text" class="goods" name="specNumber" value="'+d.code+'" autocomplete="off" readonly/></td>\n' +
                                        '<td><input type="text" name="quantity" value="'+d.count+'"class="quantity" readonly/></td>\n' +
                                        '<td><i class="delete">-</i></td>\n' +
                                        '</tr>';
                                    $("#sp-data").append(ht);
                                }

                                //alert("导入成功");
                            } else {
                                alert("更新失败:" + result.msg);
                            }
                            // alert(JSON.stringify(result));
                            return false;
                        },
                        error: function () {
                            $("#excel_upload_btn_").hide();
                            $("#excel_upload_btn").show();
                            alert("excel上传失败");
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                }

                return false;
            })


            // 保存
            $('#save').click(function () {
                // 获取页面已有的一个form表单
                // var form = document.getElementById("sp-form");
                // 用表单来初始化
                var formData = $('#sp-form').serialize();

                $('#sp-form').submit();
            });

            function isnull(val) {
                if (val == '' || val == undefined || val == null || val.length <= 0) return true;
                return false;
            }
        });
    </script>
    <!-- end sp-wrapper -->
    <script>
        layui.use(['laydate', 'form','layer'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var layer = layui.layer;

            //执行一个laydate实例
            laydate.render({
                elem: '#include_date' //指定元素
            });
            form.on('select(parent1)',function (data) {
                layer.msg(data.value)
                $.ajax({
                    type:"POST",
                    url:"/big_data/keyword_parent_list_ajax",
                    processData: false, //表明不要对数据进行处理
                    data:JSON.stringify({parentId:data.value}),
                    contentType: 'application/json',
                    success:function (res) {
                        if(res.code == 0){
                            var str = '<option value="">二级</option>';
                            for(var i=0;i<res.data.length;i++){
                                var d = res.data[i];
                                str += '<option value="'+d.id+'" >'+d.keyword+'</option>';
                            }
                            $("#parent2").html(str);
                            form.render();
                        }else {
                            layer.msg(res.msg)
                        }
                        return false;
                    }
                });
            })

        });
    </script>
      </div>
    </div>
</div>
</body>
<html>
